<template>
  <div>
    <a-table
      :class="'my-index-table tytable1'"
      ref="table1"
      size="small"
      rowKey="id"
      bordered
      :columns="columns"
      :dataSource="dataSource1"
      :pagination="false"
      :scroll="{ x: 3001}"
    >
      <template slot="ellipsisText" slot-scope="text">
        <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
      </template>

      <template slot="dayWarnning" slot-scope="text, record">
        <a-icon type="bulb" theme="twoTone" style="font-size: 22px" :twoToneColor="getTipColor(record)" />
      </template>
    </a-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '制冷用电拆分',
          align: 'left',
          children: [
            {
              title: '名称',
              children: [
                {
                  width: 100,
                  dataIndex: 'yjje',
                  title: (
                    <div class="headerDiv">
                      <div class="name">柜号</div>
                      <div class="date">日期</div>
                    </div>
                  ),
                },
              ],
            },
            {
              title: '事故风机',
              align: 'center',
              children: [
                {
                  title: 'AK-K1',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '蒸发冷',
              align: 'center',
              children: [
                {
                  title: 'AC-K2/K3',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '氨泵',
              align: 'center',
              children: [
                {
                  title: 'AC-K4..K6',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '冷库',
              align: 'center',
              children: [
                {
                  title: 'AAC1',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: 'AAC2',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '高压机(预冷、鲜品库)-10',
              align: 'center',
              children: [
                {
                  title: 'AAC3',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: 'AAC4',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: 'AAC5',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: 'AAC6',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '空调',
              align: 'center',
              children: [
                {
                  title: 'AAC7',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: 'AAC8',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: 'AAC9',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: '空调水泵2',
                  children: [
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: '空调水泵4',
                  children: [
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '速冻隧道(低压机)',
              align: 'center',
              children: [
                {
                  title: 'AAC16',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: 'AAC17',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: 'AAC18',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '生食1#2#3#单冻机(低压机)',
              align: 'center',
              children: [
                {
                  title: 'AAC19',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: 'AAC20',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '生食4#5#单冻机(低压机)',
              align: 'center',
              children: [
                {
                  title: 'AAC21',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '生食6#7#8#单冻机(低压机)',
              align: 'center',
              children: [
                {
                  title: 'AAC22',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
                {
                  title: 'AAC23',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '熟食9#单冻机',
              align: 'center',
              children: [
                {
                  title: 'AAC10',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '熟食10#单冻机',
              align: 'center',
              children: [
                {
                  title: 'AAC11',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '熟食11#单冻机',
              align: 'center',
              children: [
                {
                  title: 'AAC12',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '熟食12#单冻机',
              align: 'center',
              children: [
                {
                  title: 'AAC13',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '熟食13#单冻机',
              align: 'center',
              children: [
                {
                  title: 'AAC14',
                  children: [
                    {
                      title: '表数',
                      width: 50,
                      dataIndex: 'water',
                    },
                    {
                      title: '用量',
                      width: 50,
                      dataIndex: 'water',
                    },
                  ],
                },
              ],
            },
            {
              title: '合计',
              align: 'center',
              children: [
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '共用电量',
              align: 'center',
              children: [
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '-43系统单冻机用电',
              align: 'center',
              children: [
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '-43速冻隧道用电',
              align: 'center',
              children: [
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '-10系统用电',
              align: 'center',
              children: [
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '-33系统用电',
              align: 'center',
              children: [
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '-6系统用电',
              align: 'center',
              children: [
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
          ],
        },
      ],
      dataSource1: [
        {
          yjje: '2021-08-08',
          water: 0,
        },
      ],
    }
  },
  mounted() {
    setTimeout(() => {
      let width = document.getElementsByClassName('ant-table-row-cell-break-word')[0].offsetWidth
      let height = document.getElementsByClassName('ant-table-row-cell-break-word')[0].offsetHeight
      var sinOfAngleX = height / width // 0.5
      let deg = (Math.atan(sinOfAngleX) * 180) / Math.PI
      document.getElementsByClassName('headerDiv')[0].style.width = width-16+"px"
      document.getElementsByClassName('headerDiv')[0].style.height = height-16+"px"
      document.getElementsByClassName('ant-table-row-cell-break-word')[0].style.background =
        'linear-gradient(' + deg.toFixed(0) + 'deg, transparent 49.5%, #ddd 49.5%, #ddd 50.5%, transparent 50.5%)'
    }, 200)
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-table-small > .ant-table-content > .ant-table-body{
  margin:0;
}
.headerDiv {
  position: relative;
  .name{
    position: absolute;
    right:0;
    top:0;
  }
  .date{
    position: absolute;
    left:0;
    bottom:0;
  }
}
</style>